import { type ReactElement, type ReactNode } from 'react'

export type PanelModeType = 'bottom' | 'mini'

export type PlayModeType = 'random' | 'order' | 'single'

export type ThemeType = 'light' | 'dark'

export interface AudioProps {
  src: string
  name: string
  author: string
  pic?: string
  lyric?: string
  tLyric?: string
  time: string
}

export interface IconProps {
  icons: PlayerIcons
  size?: number
  fill: string
}

export interface VolumeIconProps extends IconProps {
  volume: number
}

export interface ModeIconProps extends IconProps {
  playMode: PlayModeType
}

export interface LyricIconProps extends IconProps {
  show: boolean
}

export interface ControlPanelProps {
  error: boolean
  audio: AudioProps
  audioList: AudioProps[]
  audioIndex: number
  playerSliderValue: number
  volumeSliderValue: number
  currentTime: string
  durationTime: string
  playing: boolean
  playMode: PlayModeType
  showLyric: boolean
  defaultAudioPic?: string
  playerIcons: PlayerIcons
  iconColor: string
  fontColor: string
  miniStyleLeft: string | number | undefined
  miniStyleRight: string | number | undefined
  miniStyleTop: string | number | undefined
  miniStyleBottom: string | number | undefined
  playerTheme: ThemeType
  onChangePlayerSlider: (value: number) => void
  onChangeCompletePlayerSlider: (value: number) => void
  onChangeVolumeSlider: (value: number) => void
  onPlay: () => void
  onPause: () => void
  onChangePlayMode: () => void
  onPlayPrev: () => void
  onPlayNext: () => void
  onDownLoad: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  onRemoveAudioIndex: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  onShowLyric: () => void
  onClose: () => void
  onClickVolume: () => void
  onPlayAudio: (index: number) => void
  onClearAudioList: () => void
  onChangePanelMode: (playMode: PanelModeType) => void
  onChangePlayTheme: () => void
}

export interface LyricProps {
  lyric?: string
  tLyric?: string
  currentTime: number
  playMode: 'desktop' | 'roll'
  show: boolean
  emptyLyricDescription: ReactNode
}

export interface DesktopLyricProps {
  show: boolean
  emptyLyricDescription: ReactNode
  formatLyricData: LyricLineProps[]
  playIndex: number
  currentTime: number
  formatWidth: (lineIndex: number, wordIndex: number) => string
}

export interface LyricWordProps {
  text: string
  startTime: number
  endTime: number
  percent: number
  start: string
  end: string
}

export interface LyricLineProps {
  text: string
  startTime: number
  endTime: number
  words: LyricWordProps[]
  start: string
  end: string
  trans: string
}

export interface PlayerIcons {
  /* 控制播放列表显示或隐藏的图标 */
  audioListIcon?: ReactElement
  /* 播放列表中每个音频正在播放的图标 */
  audioListPlaying?: ReactElement
  /* 播放列表中删除音频的删除图标 */
  deleteIcon?: ReactElement
  /* 播放 */
  playIcon?: ReactElement
  /* 暂停 */
  pauseIcon?: ReactElement
  /* 上一首 */
  prevIcon?: ReactElement
  /* 下一首 */
  nextIcon?: ReactElement
  /* 顺序播放 */
  orderIcon?: ReactElement
  /* 随机播放 */
  randomIcon?: ReactElement
  /* 单曲循环 */
  singleIcon?: ReactElement
  /* 音量 */
  volumeIcon?: ReactElement
  /* 静音 */
  minVolumeIcon?: ReactElement
  /* 静音 */
  maxVolumeIcon?: ReactElement
  /* 销毁播放器 */
  closeIcon?: ReactElement
  /* 下载音频文件 */
  downloadIcon?: ReactElement
  /* 开启歌词显示 */
  openLyricIcon?: ReactElement
  /* 关闭歌词显示 */
  closeLyricIcon?: ReactElement
  /* 变为Bottom样式 */
  fullScreenIcon?: ReactElement
  /* 变为Float样式 */
  offScreenIcon?: ReactElement
  /* Float样式右下角音乐符号 */
  floatMusicIcon?: ReactElement
  /* 主题 */
  themeIcon?: ReactElement
}
export interface BaseProps {
  /* 图标颜色 */
  fontColor?: string
  /* 图标颜色 */
  iconColor?: string
  /* 播放器模式 */
  panelMode: PanelModeType
  /* 播放列表的音频数据 */
  audioList: AudioProps[]
  /* 音量，传入组件可以控制播放器音量大小 */
  volume?: number
  /* 播放器模式 */
  playMode?: PlayModeType
  /* 播放器整体容器的z-index值 */
  zIndex?: number
  /* 歌词组件为空时的占位元素 */
  emptyLyricDescription?: ReactNode
  /* 歌曲图片为空的默认图片 */
  defaultAudioPic?: string
  /* 自定义图标 */
  playerIcons?: PlayerIcons
  /* 浮动模式专属属性 */
  miniStyle?: {
    left?: number | string
    right?: number | string
    top?: number | string
    bottom?: number | string
  }
  /* 音量变化时的回调函数 */
  onVolumeChange?: (volume: number) => void
  /* 播放器内音频改变触发的回调函数 */
  onAudioChange?: (currentAudio: AudioProps) => void
  /* 播放器内音频暂停触发的回调函数 */
  onAudioPause?: (currentAudio: AudioProps) => void
  /* 播放器内音频播放触发的回调函数 */
  onAudioPlay?: (currentAudio: AudioProps) => void
  /* 播放器内音频播放触发的回调函数 */
  onCurrentTimeChange?: (currentTime: number) => void
  /* 播放器播放模式修改的回调函数 */
  onChangePlayMode?: (playMode: PlayModeType) => void
  /* 桌面歌词打开的回调函数 */
  onLyricOpenChange?: (status: boolean) => void
  /* 修改主题事件 */
  onThemeChange?: (theme: ThemeType) => void
}

export interface ReactMusicPlayerProps extends BaseProps {
  /* 主題 */
  playerTheme: ThemeType
  /* 修改主题事件 */
  changePlayerTheme: () => void
}

export interface AppProps extends BaseProps {
  /* 主题 */
  theme?: ThemeType
}
